<template>
	<div class="app-container">
		<el-card class="box-card">
			<template #header>
				<div class="card-header">
					<span>{{ isEdit ? "编辑物业费" : "添加物业费" }}</span>
				</div>
			</template>
			<el-form
				ref="formRef"
				:model="form"
				:rules="rules"
				label-width="120px"
				class="form-container"
			>
				<el-form-item label="房屋信息" prop="houseId">
					<el-select
						v-model="form.houseId"
						placeholder="请选择房屋"
						clearable
						filterable
						remote
						:remote-method="handleHouseSearch"
						:loading="houseSearchLoading"
						style="width: 100%"
					>
						<el-option
							v-for="item in houseOptions"
							:key="item.id"
							:label="item.address"
							:value="item.id"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="费用金额" prop="amount">
					<el-input-number
						v-model="form.amount"
						:precision="2"
						:step="0.01"
						:min="0"
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="缴费状态" prop="isPaid">
					<el-switch
						v-model="form.isPaid"
						active-text="已缴费"
						inactive-text="未缴费"
					/>
				</el-form-item>
				<el-form-item label="缴费日期" prop="paidDate">
					<el-date-picker
						v-model="form.paidDate"
						type="date"
						placeholder="选择缴费日期"
						value-format="YYYY-MM-DD"
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="到期时间" prop="dueDate">
					<el-date-picker
						v-model="form.dueDate"
						type="date"
						placeholder="选择到期时间"
						value-format="YYYY-MM-DD"
						style="width: 100%"
					/>
				</el-form-item>
				<!-- <el-form-item label="备注" prop="remark">
					<el-input
						v-model="form.remark"
						type="textarea"
						:rows="3"
						placeholder="请输入备注信息"
					/>
				</el-form-item> -->
				<el-form-item>
					<el-button type="primary" @click="handleSubmit">保存</el-button>
					<el-button @click="handleCancel">取消</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();
const formRef = ref(null);
const houseSearchLoading = ref(false);
const houseOptions = ref([]);

const isEdit = computed(() => {
	return route.params.id !== undefined;
});

const form = ref({
	houseId: "",
	amount: 0,
	isPaid: false,
	paidDate: "",
	dueDate: "",
	remark: "",
});

const rules = {
	houseId: [{ required: true, message: "请选择房屋", trigger: "change" }],
	amount: [{ required: true, message: "请输入费用金额", trigger: "blur" }],
	dueDate: [{ required: true, message: "请选择到期时间", trigger: "change" }],
};

// 房屋搜索
const handleHouseSearch = async (query) => {
	if (query) {
		houseSearchLoading.value = true;
		try {
			// TODO: 调用房屋搜索API
			// const res = await searchHouses(query)
			// houseOptions.value = res.data
		} catch (error) {
			console.error("房屋搜索失败:", error);
		} finally {
			houseSearchLoading.value = false;
		}
	} else {
		houseOptions.value = [];
	}
};

// 获取物业费详情
const getPropertyFeeDetail = async (id) => {
	try {
		// TODO: 调用获取物业费详情API
		// const res = await getPropertyFeeById(id)
		// form.value = res.data
	} catch (error) {
		console.error("获取物业费详情失败:", error);
		ElMessage.error("获取物业费详情失败");
	}
};

// 提交表单
const handleSubmit = async () => {
	if (!formRef.value) return;
	await formRef.value.validate(async (valid) => {
		if (valid) {
			try {
				// TODO: 调用保存物业费API
				// if (isEdit.value) {
				// 	await updatePropertyFee(route.params.id, form.value)
				// } else {
				// 	await createPropertyFee(form.value)
				// }
				ElMessage.success("保存成功");
				router.push("/property-fee/list");
			} catch (error) {
				console.error("保存物业费失败:", error);
				ElMessage.error("保存失败");
			}
		}
	});
};

// 取消
const handleCancel = () => {
	router.back();
};

onMounted(() => {
	if (isEdit.value) {
		getPropertyFeeDetail(route.params.id);
	}
});
</script>

<style scoped>
.app-container {
	padding: 20px;
}
.form-container {
	max-width: 600px;
	margin: 0 auto;
}
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>
